import React from 'react';
import { Button, Form, Input } from 'antd';
import "./editDept.css";

class DeptDetail extends React.Component {
  constructor() {
    super();
    this.formRef = React.createRef();
  }

  componentDidMount() {
    if (this.props.iseditmode) {
      // 如果是编辑，填充表单
      this.formRef.current.setFieldsValue(this.props.editData);
    }
  }

  onFinish = (newValues) => {

    let url = "http://1.94.134.166:8805/dept";
    let method = 'POST';  // 默认是新增操作
    let oldValues={};

    if (this.props.iseditmode) {
      // 如果是编辑，修改请求方法
      method = 'PUT';
      oldValues = this.props.editData;
      console.log(oldValues);
      for(let item in newValues){
        oldValues[item]=newValues[item];
      }
      console.log(oldValues);
    }

    const config = {
      method: method,
      headers: {
        'Content-Type': 'application/json',
        Authorization: localStorage.getItem('Authorization'),
      },
      body: JSON.stringify(this.props.iseditmode ? oldValues : newValues ),
    };

    fetch(url, config)
      .then((response) => response.json())
      .then((res) => {
        this.props.refreshList(); // 更新列表
        if (this.props.iseditmode) {
          this.props.closeDrawer1(); // 关闭修改弹窗
        }else{
          this.props.closeDrawer2(); // 关闭新增弹窗
        }
      });
  }

  render() {
    return (
      <>
        <div className="edit_inputarea">
          <Form
            name="basic"
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 20,
            }}
            ref={this.formRef}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="deptName"
              label="部门名称"
              rules={[
                {
                  required: true,
                  message: '请输入部门名称!',
                },
                {
                  pattern: /^[\u4e00-\u9fa5a-zA-Z0-9]+$/,
                  message: '部门名称只能包含中文、字母和数字!',
                },
                {
                  min: 2,
                  max: 20,
                  message: '部门名称长度应为2到20个字符!',
                },
              ]}
            >
              <Input size="large" />
            </Form.Item>

            <Form.Item
              name="deptPy"
              label="部门拼音"
              rules={[
                {
                  required: true,
                  message: '请输入部门拼音!',
                },
                {
                  pattern: /^[a-zA-Z]+$/,
                  message: '部门拼音只能包含字母!',
                },
                {
                  min: 3,
                  max: 40,
                  message: '部门拼音长度应为3到40个字符!',
                },
              ]}
            >
              <Input size="large" />
            </Form.Item>

            <Form.Item
              name="phone"
              label="联系方式"
              rules={[
                {
                  required: true,
                  message: '请输入联系方式!',
                },
                {
                  pattern: /^1(3[0-9]|4[5-9]|5[0-3,5-9]|6[2,5-9]|7[0-8]|8[0-9]|9[1,3-9])\d{8}$/,
                  message: '请输入有效的手机号!',
                },
              ]}
            >
              <Input size="large" />
            </Form.Item>

            <Form.Item
              wrapperCol={{ span: 24 }}
            >
              <div className="div_editSubmit">
                <Button type="primary" htmlType="submit" className="editSubmit">
                  { this.props.iseditmode ? '更新' : '提交'} {/* 判断按钮 */}
                </Button>
              </div>
            </Form.Item>
          </Form>
        </div>
      </>
    );
  }
}

export default DeptDetail;
